/* 组件样式 */

/* 视频卡片组件 */
.video-card-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--color-background-card);
  box-shadow: var(--shadow-md);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.video-card-wrapper:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-0.25rem);
}

.group .video-card-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--color-background-card);
  box-shadow: var(--shadow-md);
  transition-property: all;
  transition-duration: 200ms;
}

.group:hover .video-card-wrapper {
  box-shadow: var(--shadow-lg);
  transform: translateY(-0.25rem);
}

.video-card-image-container {
  @apply relative aspect-[3/4] w-full overflow-hidden;
}

.video-card-image {
  @apply object-cover w-full h-full transition-transform duration-300 ease-in-out;
}

.group:hover .video-card-image {
  transform: scale(1.05);
}

.video-card-overlay {
  @apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent opacity-80;
}

.video-card-content {
  @apply absolute bottom-0 left-0 right-0 p-3;
}

.video-card-title {
  @apply font-medium leading-tight whitespace-nowrap overflow-hidden text-ellipsis text-white mb-0.5 text-xs sm:text-sm text-center;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .video-card-title {
    line-height: 1.2;
    margin-bottom: 0.25rem; /* 4px */
  }
}

@media (min-width: 768px) {
  .video-card-title {
    line-height: 1.15;
  }
}

.video-card-meta {
  @apply flex justify-between items-center text-[10px] sm:text-xs text-gray-300;
}

.video-card-tag {
  @apply absolute top-2 left-2 bg-accent-primary/90 text-white text-xs sm:text-sm px-1.5 py-0.5 rounded-md mr-1.5 leading-none font-medium;
}

.video-card-vip {
  @apply absolute top-0 right-0 z-10 px-1.5 py-0.5 bg-gradient-to-r from-yellow-500 to-red-500 text-xs text-white font-bold rounded-bl-lg;
}

/* 详情页组件 */
.detail-container {
  @apply w-full max-w-screen-xl mx-auto px-3 sm:px-6 md:px-8 lg:px-12 py-4 sm:py-6;
}

.detail-header {
  @apply mb-6;
}

.detail-title {
  @apply text-xl md:text-2xl lg:text-3xl font-bold mb-2;
  letter-spacing: -0.01em;
}

.detail-meta-item {
  @apply flex items-start;
}

.detail-meta-label {
  @apply text-gray-400 mr-2 w-12 md:w-12 max-sm:w-8 shrink-0;
}

.detail-meta-value {
  @apply flex-grow;
}

.detail-description {
  @apply mt-6 text-sm md:text-base text-gray-300 leading-relaxed;
  letter-spacing: 0.01em;
}

.detail-tag {
  @apply inline-block px-3 py-1 bg-background-dark text-white text-sm rounded-md;
}

/* 导航组件 */
.nav-container {
  @apply fixed top-0 left-0 right-0 z-50 bg-background-dark/95 backdrop-blur-md border-b border-gray-800/50;
  box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.nav-inner {
  @apply flex items-center h-14 md:h-16 px-3 sm:px-8 mx-auto;
}

.nav-logo {
  @apply flex items-center;
}

.nav-logo-text {
  @apply text-xl font-bold text-white;
  letter-spacing: -0.01em;
}

.nav-links {
  @apply hidden md:flex ml-8 space-x-2;
}

.nav-link {
  @apply px-3 py-2 text-sm font-medium transition-colors duration-200 hover:text-accent-primary rounded-md;
}

.nav-link-active {
  /* 移除高亮样式 */
  @apply text-gray-400;
}

.nav-search {
  @apply ml-auto relative;
}

.nav-search-input {
  @apply w-full md:w-64 px-4 py-2 bg-background-card border border-gray-700/80 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-accent-primary focus:border-transparent;
}

.nav-search-icon {
  @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400;
}

/* 移动导航 */
.mobile-nav {
  @apply fixed bottom-0 left-0 right-0 z-50 bg-background-darker border-t border-gray-800/50 md:hidden;
  box-shadow: 0 -1px 8px rgba(0,0,0,0.15);
}

.mobile-nav-inner {
  @apply flex items-center justify-around h-14;
}

.mobile-nav-item {
  @apply flex flex-col items-center justify-center py-1 px-3;
}

.mobile-nav-icon {
  @apply text-xl mb-0.5 text-gray-400;
}

.mobile-nav-text {
  @apply text-[10px] text-gray-400 font-medium;
}

.mobile-nav-item-active .mobile-nav-icon,
.mobile-nav-item-active .mobile-nav-text {
  /* 移除高亮样式 */
  @apply text-gray-400;
}

/* 页脚组件 */
.footer {
  @apply bg-background-darker py-8 border-t border-gray-800/50;
}

.footer-content {
  @apply max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8;
}

.footer-logo {
  @apply text-xl font-bold text-white mb-4;
  letter-spacing: -0.01em;
}

.footer-links {
  @apply flex flex-wrap gap-6 mb-6;
}

.footer-link {
  @apply text-sm text-gray-400 hover:text-white transition-colors;
}

.footer-bottom {
  @apply text-xs text-gray-500 border-t border-gray-800/30 pt-5 mt-4;
}

/* 按钮组件 */
.btn-icon {
  @apply inline-flex items-center justify-center;
}

.btn-icon-left {
  @apply mr-2;
}

.btn-icon-right {
  @apply ml-2;
}

/* 加载组件 */
.loading-spinner {
  @apply animate-spin h-5 w-5 text-white;
}

.loading-dots {
  @apply flex space-x-1.5;
}

.loading-dot {
  @apply h-2 w-2 bg-accent-primary rounded-full animate-pulse;
}

.loading-dot-1 {
  animation-delay: 0ms;
}

.loading-dot-2 {
  animation-delay: 200ms;
}

.loading-dot-3 {
  animation-delay: 400ms;
}

/* 骨架屏组件 */
.skeleton-card {
  @apply rounded-md overflow-hidden bg-background-card;
  box-shadow: var(--shadow-md);
}

.skeleton-image {
  @apply aspect-[3/4] w-full bg-background-dark animate-pulse;
}

.skeleton-title {
  @apply h-4 bg-background-dark rounded animate-pulse mt-2 mx-2;
}

.skeleton-text {
  @apply h-3 bg-background-dark rounded animate-pulse mt-1 mx-2 w-2/3;
}

/* 主内容区背景纹理 */
main.container {
  position: relative;
  overflow: hidden;
}

main.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='%23121212' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.3;
}

/* 滚动条样式 */
.scrollbar-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 95, 87, 0.4) rgba(31, 41, 55, 0.3);
  padding-right: 6px;
  /* mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%); */
}

.scrollbar-container:hover {
  scrollbar-color: rgba(255, 95, 87, 0.6) rgba(31, 41, 55, 0.5);
} 

.scrollbar-container:hover {
  scrollbar-color: rgba(255, 95, 87, 0.6) rgba(31, 41, 55, 0.5);
} 